<template>
  <el-card class="el-card--has-heading success">
    <div slot="header">
      <span>维保供应商</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="onClickCreate"
        v-auth:[$P.business.maintenanceSupplier.create]
      >创建供应商</el-button>
    </div>
    <v-table
      :dataSource="dataSource"
      :columns="filterColumn(columns,[$P.business.maintenanceSupplier.update,$P.business.maintenanceSupplier.delete])"
      :loading="loading"
      :total="total"
      v-bind="bindProps"
      v-on="bindListeners"
    ></v-table>

    <Modal
      :title="modalTitle"
      :loading="modalLoading"
      :visible.sync="visible"
      :width="$V.size.sm"
      :onOk="handleSubmit"
      :onCancel="handleClose"
      :okText="modalType === 'create' ? $t('createText') : $t('updateText')"
    >
      <SupplierFreshForm :record="record" ref="form" />
    </Modal>
  </el-card>
</template>

<script>
import {
  getMaintenanceSupplierFreshList,
  createMaintenanceSupplierFresh,
  updateMaintenanceSupplierFresh,
  deleteMaintenanceSupplierFresh
} from '@/api'

/* components
---------------------------------------------------------------- */
import SupplierFreshForm from './components/SupplierFreshForm'
import { Query } from '@/mixins'

/* model
---------------------------------------------------------------- */
import { primaryKey } from './model'

export default {
  mixins: [Query('query')],

  data () {
    return {
      total: 0,
      dataSource: [],
      loading: false,
      columns: [
        { prop: 'supplierName', label: '供应商名称' },
        { prop: 'supplierContactName', label: '供应商联系人' },
        { prop: 'supplierContactNumber', label: '供应商联系电话', minWidth: this.$V.cellSize.phone },
        { prop: 'supplierCreateTime', label: '创建时间', width: this.$V.cellSize.date, formatter: row => this.$formatTime(row['supplierCreateTime']) },
        { prop: 'supplierCreateUserName', label: '创建人' },
        { prop: 'supplierUpdateTime', label: '修改时间', width: this.$V.cellSize.date, formatter: row => this.$formatTime(row['supplierUpdateTime']) },
        { prop: 'supplierUpdateUserName', label: '修改人' },
        {
          label: '操作',
          minWidth: this.$V.cellSize.action,

          formatter: this.getActionDecorator([
            {
              icon: 'el-icon-edit',
              action: this.onClickUpdate,
              auth: this.$P.business.maintenanceSupplier.update,
              type: 'primary'
            },
            {
              icon: 'el-icon-delete',
              action: this.onClickDelete,
              auth: this.$P.business.maintenanceSupplier.delete,
              type: 'danger'
            }
          ])
        }
      ],
      record: {},

      // -------- Modal ----------
      visible: false,
      modalLoading: false,
      modalType: ''

      // -------- !Modal ----------
    }
  },
  methods: {
    // Requests
    // ------------------------------------------
    getMaintenanceSupplierFreshList (fn) {
      return this.Catch(getMaintenanceSupplierFreshList, {
        onOk (res) {
          this.dataSource = res.data.data
          this.total = res.data.total
        }
      })('loading', (fn || this.$noop)(this.query))
    },

    deleteMaintenanceSupplierFresh (id, { onOk }) {
      return this.Catch(deleteMaintenanceSupplierFresh, {
        onOk
      })(null, id)
    },

    createMaintenanceSupplierFresh (data) {
      return this.Catch(createMaintenanceSupplierFresh, {
        onOk () {
          this.$message.success(this.$t('createOk'))
          this.getMaintenanceSupplierFreshList()
          this.visible = false
        }
      })('modalLoading', data)
    },

    updateMaintenanceSupplierFresh (id, data) {
      return this.Catch(updateMaintenanceSupplierFresh, {
        onOk () {
          this.$message.success(this.$t('updateOk'))
          this.getMaintenanceSupplierFreshList()
          this.visible = false
        }
      })('modalLoading', id, data)
    },

    // Table
    // ------------------------------------------

    onClickDelete (row) {
      this.ConfirmDelete({
        onOk: () =>
          this.deleteMaintenanceSupplierFresh(row[primaryKey], {
            onOk () {
              this.$message.success(this.$t('deleteOk'))
              this.getMaintenanceSupplierFreshList()
            }
          })
      })
    },

    onClickUpdate (row) {
      this.modalType = 'update'
      this.record = row
      this.visible = true
    },

    onClickCreate () {
      this.modalType = 'create'
      this.record = {}
      this.visible = true
    },

    // Modal
    // ------------------------------------------
    handleSubmit () {
      this.$refs.form.submit((valid, values) => {
        if (valid) {
          if (this.modalType === 'create') {
            this.createMaintenanceSupplierFresh(values)
          } else {
            this.updateMaintenanceSupplierFresh(values[primaryKey], values)
          }
        }
      })
    },

    // 关闭modal清理数据
    handleClose () {
      this.visible = false
    }
  },
  computed: {
    modalTitle () {
      return this.modalType === 'create'
        ? this.$t('createText')
        : this.$t('updateText')
    }
  },
  components: { SupplierFreshForm },

  created () {
    this.getMaintenanceSupplierFreshList()
    this.inject(this.getMaintenanceSupplierFreshList)
  }
}
</script>
